<template>
  <div class="content-view">

    <div class="table-head-tool">
      <Button type="primary" @click="showAddWarp">新增</Button>
    </div>
    <div class="table-body">
      <tables :columns="gridOption.columns" :value="gridOption.data"></tables>
    </div>
    <editModal ref="editModal" :columns="gridOption.columns" :rules='gridOption.rules'>
      <fieldItem slot="bottom" name='添加明细'>
        <div style="text-align: right;">
          <Button type="primary" shape="circle" icon="md-add" @click="showAddDtlWarp"></Button>
        </div>

        <tables class="mt10" :columns="gridDtlOption.columns" :value="gridDtlOption.data"></tables>
        <editModal ref="addDtlWarp" :columns="gridDtlOption.columns" :rules="gridDtlOption.rules">
        </editModal>
      </fieldItem>
    </editModal>
  </div>
</template>

<script>
import sysAdServer from '@/api/ad/sysAdServer'
import funTool from '@/libs/funTool'
import uiTool from '@/libs/uiTool'

export default {
  data() {
    const radioSource = [
      { key: 0, value: '是' },
      { key: 1, value: '否' },
    ]
    return {
      dtl: [],
      gridOption: {
        param: {},
        rules: {
          key: [{ required: true, message: '请填写key', trigger: 'blur' }],
          name: [{ required: true, message: '请填写名称', trigger: 'blur' }],
        },
        columns: [
          { title: 'key', key: 'key' },
          { title: '名称', key: 'name' },
          {
            title: '是否显示',
            key: 'enabled',
            com: 'Radio',
            source: radioSource,
            render(h, param) {
              let { enabled } = param.row
              if (enabled) {
                return <span style={{ color: 'green', 'font-weight': 'bold' }}>是</span>
              } else {
                return <span style={{ color: 'red', 'font-weight': 'bold' }}>否</span>
              }
            },
          },
          {
            title: '操作',
            key: 'action',
            type: 'template',
            render: (h, params) => {
              let btns = [
                {
                  title: '修改',
                  type: 'primary',
                  click: () => {
                    this.showEditWarp(params.row)
                  },
                },
                {
                  title: '删除',
                  type: 'primary',
                  click: () => {
                    this.delConfirm(params.row)
                  },
                },
              ]
              return uiTool.getBtn(h, btns)
            },
          },
        ],
        data: [],
      },
      gridDtlOption: {
        rules: {
          image_url: [{ required: true, message: '请上传图片', trigger: 'change' }],
        },
        data: [],
        columns: [
          {
            title: '图片',
            key: 'image_url',
            com: 'upload_Img',
            render(h, params) {
              return <img height="80" src={params.row.image_url} />
            },
          },
          { title: '链接', key: 'link', isRow: true },
          {
            title: '操作',
            key: 'action',
            type: 'template',
            render: (h, params) => {
              let btns = [
                {
                  title: '修改',
                  type: 'primary',
                  click: () => {
                    this.showDtlEditWarp(params.row, params.index)
                  },
                },
                {
                  title: '删除',
                  type: 'primary',
                  click: () => {
                    this.delDtlConfirm(params.row)
                  },
                },
              ]
              return uiTool.getBtn(h, btns)
            },
          },
        ],
      },
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.seachData()
    },
    showAddWarp() {
      let that = this
      this.gridDtlOption.data = []
      this.gridOption.columns.forEach((p) => {
        if (p.key === 'key') {
          p.disabled = false
        }
      })
      this.$refs.editModal.addShow({ enabled: 0 }, async (newRow) => {
        let valid = await that.$refs['editModal'].$refs['From'].validate()
        if (valid) {
          newRow.dtl = that.gridDtlOption.data
          let res = await sysAdServer.add(newRow)
          that.init()
          rootVue.$Message.success('新增成功！')
        }
      })
    },

    showEditWarp(row) {
      let that = this
      this.gridOption.columns.forEach((p) => {
        if (p.key === 'key') {
          p.disabled = true
        }
      })

      this.gridDtlOption.data = row.dtl || []

      this.$refs.editModal.editShow(row, async (newRow) => {
        let valid = await that.$refs['editModal'].$refs['From'].validate()
        if (valid) {
          newRow.dtl = that.gridDtlOption.data
          await sysAdServer.edit(newRow)
          that.init()
          rootVue.$Message.success('修改成功！')
        }
      })
    },
    showAddDtlWarp() {
      this.$refs.addDtlWarp.addShow({}, async (newRow) => {
        this.gridDtlOption.data.push(newRow)
      })
    },
    showDtlEditWarp(row, index) {
      this.$refs.addDtlWarp.editShow(row, async (newRow) => {
        this.gridDtlOption.data[index] = newRow
      })
    },

    async seachData() {
      let res = await sysAdServer.getAll({})
      this.gridOption.data = res.data
    },
    async delConfirm(row) {
      uiTool.delConfirm(async () => {
        await sysAdServer.del(row)
        rootVue.$Message.success('删除成功！')
        this.init()
      })
    },
    async delDtlConfirm(row) {
      let index = row.initRowIndex
      uiTool.delConfirm(async () => {
        this.gridDtlOption.data.splice(index, 1)
      })
    },
  },
}
</script>

<style lang="less" >
</style>
